<template name="basics">
	<view>
		<scroll-view scroll-y class="page bg-white">
			<image src="https://img.xiaopiu.com/userImages/img1069165f0a4e4d8.png" mode="widthFix" class="response"></image>
			<!-- <image src="https://cdn.nlark.com/yuque/0/2019/jpeg/280373/1552834692650-assets/web-upload/5a38c3b7-0636-4d85-883e-cba45a5a5fda.jpeg"
			 mode="widthFix" class="response"></image> -->
			<view class="space ">
				<view class="stars ">
				  <view class="star "></view>
				  <view class="star pink "></view>
				  <view class="star blue "></view>
				  <view class="star yellow "></view>
				</view>
			</view>
			
			 
			<view class="head_title ">
				<view class="text-white text-center padding-xl ">
					<view class="cu-tabbar-height"></view>
					<view class="cu-tabbar-height"></view>
					<view class="text-xxl text-bold">
						猫云
					</view>
					<view class="padding text-lg">
						微擎模块授权
					</view>
				</view>
			</view>
			<!-- <view class="cu-bar bg-white solid-bottom">
				<view class="action  text-theme">
					<text class="cuIcon-titles text-theme"></text>
					<text class="text-xl text-bold"> 模块列表</text>
				</view>
				<view class="action">
					
				</view>
			</view> -->
			
			<!-- <view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item,index) in list" :key="index">
					<view class="cu-avatar round lg" :style="{backgroundImage:'url('+item.logoimage+');'}"></view>
					<view class="content">
						<view class="text-grey">{{item.name}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								
								{{item.description}}
							</view> </view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">22:20</view>
						<view class="cu-tag round bg-grey sm">5</view>
					</view>
				</view>
				
			</view> -->
			
			
			<view class="flex">
				<view class="flex-sub" @tap="applyAuth">
					<view class="apply_button bg-theme light text-center text-bold round">
						申请授权
					</view>
				</view>
				<view class="flex-sub" @tap="applyPosition">
					<view class="apply_button bg-theme light text-center text-bold round">
						加开坑位
					</view>
				</view>
			</view>
			<view class="" @tap="Toggle"  :class="animation?'animation-shake':''"  >
				<image  src="../../static/miao.png" mode="widthFix" class="response "></image>
			</view>
			
			
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "basics",
		data() {
			return {
				list:[],
				animation:false
			};
		},
		onShow() {
			console.log("success")
		},
		created() {
			
		},
		methods:{
			
			Toggle() {
				this.animation= true;
				setTimeout(()=>{
					this.animation= false;
				}, 1000)
			},
			applyAuth(){
				this.Toggle()
				uni.navigateTo({
					url:'/pages/applyAuth/applyAuth'
				})
			},
			applyPosition(){
				this.Toggle()
				uni.navigateTo({
					url:'/pages/applyPosition/applyPosition'
				})
			}
			
		}
		
	}
</script>

<style>
	@import "../../colorui/animation.css";
	.page {
		height: 100vh;
		position: relative;
	}
	.head_title{
		position: absolute;
		width: 750rpx;
		top: 0;
	}
	.apply_button{
		width: 300rpx;
		height: 300rpx;
		text-align: text-center;
		line-height: 300rpx;
		margin: 60rpx auto;
	}
	
	
	
	
	.space {
	 position: absolute;
	 top: 0;
	 left: 0;
	}
	.planet {
	    width: 150rpx;
	    height: 150rpx;
	    border-radius: 50%;
	    background: #333;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin: -75rpx 0 0 -75rpx;
	    overflow: hidden;
	    z-index: 2;
	}
	.planet_shadow {
	    position: absolute;
	    border-radius: 50%;
	    height: 100%;
	    width: 100%;
	    top: -40%;
	    right: -10%;
	    border: 35rpx solid rgba(0, 0, 0, .15);
	}
	.star {
	    display: block;
	    width: 5rpx;
	    height: 5rpx;
	    border-radius: 50%;
	    background: #FFF;
	    top: 100rpx;
	    left: 400rpx;
	    position: relative;
	    transform-origin: 100% 0;
	    animation: star-ani 6s infinite ease-out;
	    box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
	    opacity: 0;
	    z-index: 2;
	}
	.star:after {
	    content: '';
	    display: block;
	    top: 0rpx;
	    left: 4rpx;
	    border: 0rpx solid #fff;
	    border-width: 0rpx 90rpx 2rpx 90rpx;
	    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
	    transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
	    box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
	    transform-origin: 0% 100%;
	    animation: shooting-ani 3s infinite ease-out;
	}
	.pink {
	    top: 30rpx;
	    left: 395rpx;
	    background: #ff5a99;
	    animation-delay: 5s;
	    -webkit-animation-delay: 5s;
	    -moz-animation-delay: 5s;
	}
	.pink:after {
	    border-color: transparent transparent transparent #ff5a99;
	    animation-delay: 5s;
	    -webkit-animation-delay: 5s;
	    -moz-animation-delay: 5s;
	}
	.blue {
	    top: 35rpx;
	    left: 432rpx;
	    background: cyan;
	    animation-delay: 7s;
	    -webkit-animation-delay: 7s;
	    -moz-animation-delay: 7s;
	}
	.blue:after {
	    /* border-color: transpareanimation-delay: 12s; */
	    -webkit-animation-delay: 7s;
	    -moz-animation-delay: 7s;
	    animation-delay: 7s;
	}
	.yellow {
	    top: 50rpx;
	    left: 600rpx;
	    background: #ffcd5c;
	    animation-delay: 5.8s;
	}
	.yellow:after {
	    border-color: transparent transparent transparent #ffcd5c;
	    animation-delay: 5.8s;
	}
	@keyframes star-ani {
	    0% {
	        opacity: 0;
	        transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
	    }
	    50% {
	        opacity: 1;
	        transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
	        -webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
	        -moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
	    }
	    100% {
	        opacity: 0;
	        transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
	        -webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
	        -moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
	    }
	}
</style>
